<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法3 v-bind属性绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：html插值</h1>
            <h3>可以动态的渲染DOM节点，常用来处理开发者不可预知的或难以控制的DOM结构
                注意：在网页上动态渲染html是比较危险的，容易造成漏洞被黑客攻击
            </h3>
            <span v-html="vh"></span>
        <h1>知识点2：v-pre指令</h1>
            <h3>1.它可以使代码所在的节点跳过编译；2.可以利用它跳过没有指令语法的节点，可以加快速度</h3>
            <p>例子</p>
            <span v-pre>我的工资是{{price}}</span>
        <h1>知识点3.v-bind属性绑定</h1>
            <h3>文本插值不能在html属性中使用，如果我们想要动态地调整属性，就需要使用v-bind进行绑定</h3>
                <p>没有使用v-bind</p>
                <p title="title">我没有进行属性绑定</p>
                <p>使用v-bind</p>
                <p v-bind:title="title">我进行了属性绑定，这样我的属性就可以动态进行调整了！</p>
            <h3>2.v-bind:可以省略 为：</h3>
                <p :title="title">我进行了省略，因为我实在被用了很多次</p>
            <h3>3.属性也可以绑定变量、表达式、执行函数等。注意最后的结果要符合属性的自身要求</h3>
                <p>例子1：绑定变量和表达式</p>
                <button :disabled="1+1==2">点击有奖</button>
                <input type="text" placeholder="false?请输入:请录入">
                <p>例子2：图片的动态绑定</p>
                <img :src="src" alt="">
            <h3>课堂实例：通过改变type值，来实现文本框，单选框和多选框的切换</h3>
                <input type="text">
                <input type="radio">
                <input type="checkbox">
                <p>代码实现</p>
                <input :type="type">
                <button @click="type='text'">文本框</button>
                <button @click="type='radio'">单选框</button>
                <button @click="type='checkbox'">多选框</button>
            <h3>课堂小练习：通过动态改变属性，完成字体大小和颜色的改变，参考上面例子，用按钮实现</h3>
                <span :style="{ color: color, fontSize: size+'px'}">我是一行待改变的文字</span>
                <button @click="color='green'">改成绿色</button>
                <button @click="color='yellow'">改成黄色</button>
                <button @click="color='blue'">改成蓝色</button>
                <button @click="color='orange'">改成橙色</button>
                <button @click="size++">改成变大</button>
                <button @click="size--">改成变小</button>
    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data() {
            return {
                vh:"<span>我是动态生成的html代码！</span>",
                price:10000,
                title:'都说了别碰我，你还碰我!',
                src:"./兔.jpg",
                type:"text",  
                color:'red',  
                size:16  
            }
        },
        methods: {
            changeColor(color) {
                    this.textColor = color;  
                },
                changeSize(size) {
                    if (size === 'bigger') {
                        this.textSize = '24px';  
                    } else {
                        this.textSize = '12px';  
                    }
                }
        },
    }).mount("#app")
</script>


